<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>简单选择器(simple selector)重要</title>
  <!-- 
  简单选择器（Simple Selector）是CSS中用于选择目标元素的基本选择器。简单选择器的总结： 
 
    1. 类选择器（Class Selector）：以 . 开头，选择具有指定类名的元素，例如 .my-class 。 
    2. ID选择器（ID Selector）：以 # 开头，选择具有指定ID的唯一元素，例如 #my-id 。 
    3. 元素选择器（Element Selector）：选择指定元素类型的所有元素，例如 p 选择所有段萗元素。 
    4. 通配符选择器（Universal Selector）：使用 * 选择所有元素。 
    5. 属性选择器（Attribute Selector）：根据元素的属性值来选择元素，例如 [type="text"] 选择所有 type 属性值为 text 的元素。 
    6. 伪类选择器（Pseudo-class Selector）：根据元素的特定状态或位置来选择元素，例如 :hover 选择鼠标悬停的元素。 
    7. 伪元素选择器（Pseudo-element Selector）：选择元素的特定部分或生成的内容，例如 ::before 用于在元素之前插入内容。 
  
  通过组合使用这些简单选择器，可以针对不同的元素实现精确的样式控制和选择。
  -->
  <style>
    div {
      color: royalblue;
    }

    .class-selector {
      color: red;
    }

    #id-selector {
      color: green;
    }

    .class-selector.one {
      color: blue;
    }

    .classSelector.BoxFirst {
      color: yellow;
    }
  </style>
</head>
<body>

  <div>My Name Simple Selector Div</div>

  <div class="class-selector">div class-selector</div>
  <p class="class-selector">p class-selector</p>

  <div class="id-selector">div id-selector</div>

  <!-- 比较 -->
  <div class="class-selector one"></div>
  <!-- 大/小驼峰 -->
  <div class="classSelector BoxFirst"></div>
</body>
</html>